<template>
  <div class="pointInspection">
    <Calendar
      backgroundText
      class-name="select-mode"
      :remarks="remarks"
      :lunar="isLunar ? lunar : null"
      language="cn"
      @onSelect="onSelect"
      @next="next"
      @prev="prev"
    />
    <div class="detailPlan_box">
      <p class="detailPlan">详细计划</p>
      <template v-if="planList.length > 0">
        <PlanItem
          v-for="item in planList"
          :key="item.id"
          :data="item"
          @doPlan="doPlan(item)"
          @click="goPath(item)"
        />
      </template>
      <van-empty v-else description="暂无数据" />
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
import Calendar from 'mpvue-calendar';
import lunar from 'mpvue-calendar/dist/lunar';
import PlanItem from '@/components/planItem.vue';
import { getFirstAndLastDayOfMonthTarget } from '@/utils/common.js';
import { formatDateTime } from '@/utils/common.js';

// 定义 props
const props = defineProps({
  planList: {
    type: Array,
    default: () => [],
  },
  // 日历备注
  remarks: {
    type: Object,
    default: () => {},
  },
  // 是否显示农历
  isLunar: {
    type: Boolean,
    default: false,
  },
});

// 定义 emits
const emit = defineEmits(['doPlan', 'onSelect']);

function doPlan(data) {
  emit('doPlan', data);
}
function goPath(data) {
  router.push({
    name: 'inspectionTask',
    params: {
      type: 1,
      id: data.id,
    },
  });
}
function onSelect(selectDate) {
  const date = {
    startTime: formatDateTime(selectDate) + ' 00:00:00',
    endTime: formatDateTime(selectDate) + ' 23:59:59',
  };
  emit('onSelect', date);
}

function next(y, m, d) {
  emit('onSelect', getFirstAndLastDayOfMonthTarget(y, m));
}

function prev(y, m, d) {
  console.log(getFirstAndLastDayOfMonthTarget(y, m));
  emit('onSelect', getFirstAndLastDayOfMonthTarget(y, m));
}
</script>

<style scoped lang="scss">
.pointInspection {
  padding: 32px 0 48px 0;
  width: 100%;
  .detailPlan_box {
    margin-top: 20px;
    .detailPlan {
      padding-left: 15px;
      height: 24px;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 15px;
      color: #333333;
      line-height: 24px;
    }
  }
  .mpvue-calendar {
    width: 100%;
  }
}
</style>
